import { Button, Result } from "antd"
import { useSelector } from "react-redux"
import { useNavigate } from "react-router-dom"

import { useLocale } from "@/locales"
import { AppState } from "@/stores"

const NotFoundPage: React.FC = () => {
	const navigate = useNavigate()
	const { newFormat } = useLocale()
	const { menuData } = useSelector((state: AppState) => state.user)

	return menuData.length ? (
		<Result
			status="404"
			title="404"
			subTitle={newFormat({ id: "tips.notfound" })}
			extra={
				<Button type="primary" onClick={() => navigate("/")} style={{ display: "none" }}>
					{newFormat({ id: "tips.backHome" })}
				</Button>
				// <div></div>
			}
		></Result>
	) : (
		// 当未获取到菜单路径时，不能判定是404
		<div style={{ padding: "16px" }}> {newFormat({ id: "tips.request_for_menu" })} </div>
	)
}

export default NotFoundPage
